<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>宿舍管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{!disabled?'宿舍消息':'宿舍纪检上报'}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!--内容table-->
      <el-table :data="tableData"
                ref="tableRef"
                style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left"
                     inline
                     class="demo-table-expand">
              <el-form-item label="宿舍号：">
                <span class="span">{{ props.row.dorm }}</span>
                <dormStudents :dormInfo="props.row"
                              ref="dormStudentRef"
                              @click.native="getCurrDormStudents"
                              class="dormStudents"></dormStudents>
              </el-form-item>
              <el-form-item label="宿舍长：">
                <span class="span">{{ props.row.dormLeader }}</span>
                <el-button type="success"
                           :disabled="disabled"
                           size="mini"
                           @click="changeDormLeader(props.row)">修改宿舍长</el-button>
              </el-form-item>
              <el-form-item label="班级：">
                <span class="span">{{ props.row.class }}</span>
              </el-form-item>
              <el-form-item label="学号：">
                <span class="span">{{ props.row.studentNumber }}</span>
              </el-form-item>
              <el-form-item label="床位空余：">
                <span class="span spancolor">&emsp; &emsp; {{ props.row.spare }}&emsp; &emsp; </span>
                <el-button type="success"
                           :disabled="disabled"
                           size="mini"
                           @click="changeDormBed(props.row)">修改宿舍默认容量</el-button>
              </el-form-item>
              <el-form-item label="宿舍评分：">
                <el-rate disabled
                         v-model="props.row.score"
                         show-score
                         text-color="#ff9900"
                         score-template="{value}">
                </el-rate>
                <inpection class="inpection"
                           :dormInfo="props.row"></inpection>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="楼宇"
                         prop="tower">
        </el-table-column>
        <el-table-column label="宿舍号"
                         prop="dorm">
        </el-table-column>
        <el-table-column label="宿舍长"
                         prop="dormLeader">
        </el-table-column>
        <el-table-column label="床位空余："
                         prop="spare">
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination background
                     @current-change="pagenumChange"
                     layout="prev, pager, next"
                     :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { dormInfoMixin } from 'commonjs/dormInfoMixin.js'
import inpection from './children/inspector.vue'
export default {
  name: 'currDormInfo',
  props: [''],
  components: {
    inpection
  },
  data () {
    return {
      disabled: false
    }
  },
  created () {
    this.checkInspector()
  },
  methods: {
    // 判断是不是学生宿舍卫生检查员
    async checkInspector () {
      if (window.localStorage.getItem('role') !== 'inspector') {
        this.getDormLeader(window.localStorage.getItem('tower'), null)
      } else {
        this.disabled = true
        const { data: res } = await this.$axios.get('/users/iptFindTower', {
          params: {
            studentNum: window.localStorage.getItem('studentNumber')
          }
        })
        // console.log(res)
        if (res.meta.code === 200) {
          window.localStorage.setItem('towers', res.result[0].towers)
          this.getDormLeader(window.localStorage.getItem('towers'), null)
        }
      }
    }
  },
  mixins: [dormInfoMixin]
}

</script>
<style  scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.span {
  font-size: 15px;
}
.el-rate {
  margin-top: 12px;
}
.spancolor {
  color: red;
}
.el-form-item .el-button {
  margin-left: 100px;
}
.inpection,
.dormStudents {
  position: absolute;
  left: 170%;
  top: 0;
}
</style>
